import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import {
    AppBar,
    Toolbar,
    Typography,
    Button,
    IconButton,
    Drawer,
    List,
    ListItem,
    ListItemIcon,
    ListItemText,
    Container,
    Divider,
    Box
} from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import HomeIcon from '@mui/icons-material/Home';
import CategoryIcon from '@mui/icons-material/Category';
import LayersIcon from '@mui/icons-material/Layers';
import ViewInArIcon from '@mui/icons-material/ViewInAr';
import ColorLensIcon from '@mui/icons-material/ColorLens';
import BuildIcon from '@mui/icons-material/Build';
import FormatPaintIcon from '@mui/icons-material/FormatPaint';
import { ModelProvider } from './contexts/ModelContext';
import ProtectedRoute from './components/ProtectedRoute';
import MainMenu from './components/MainMenu';

// 导入页面组件
import Home from './pages/Home';
import Models from './pages/Models';
import GeometryModel from './pages/GeometryModel';
import GeometryModelCreate from './pages/GeometryModelCreate';
import GeometryModelEdit from './pages/GeometryModelEdit';
import MaterialLibrary from './components/MaterialLibrary';

import './App.css';

function App() {
    const [drawerOpen, setDrawerOpen] = useState(false);
    const [strictMode, setStrictMode] = useState(false); // 新增：控制StrictMode

    // 在开发模式下禁用StrictMode，避免组件重复挂载导致的问题
    useEffect(() => {
        // 完全禁用StrictMode，避免Three.js组件重复挂载问题
        setStrictMode(false);
        console.log("已禁用StrictMode以避免Three.js组件重复挂载问题");
    }, []);

    const toggleDrawer = () => {
        setDrawerOpen(!drawerOpen);
    };

    const drawerItems = [
        { text: '首页', icon: <HomeIcon />, path: '/' },
        { text: '3D模型库', icon: <ViewInArIcon />, path: '/models' },
        { text: '材质库', icon: <FormatPaintIcon />, path: '/materials' },
    ];

    return (
        <ModelProvider>
            <Router>
                <div className="App">
                    <AppBar position="static">
                        <Toolbar>
                            <IconButton
                                edge="start"
                                color="inherit"
                                aria-label="menu"
                                onClick={toggleDrawer}
                            >
                                <MenuIcon />
                            </IconButton>
                            <Typography variant="h6" style={{ flexGrow: 1 }}>
                                3D模型编辑器
                            </Typography>
                            <Button color="inherit" component={Link} to="/">首页</Button>
                            <Button color="inherit" component={Link} to="/models">模型库</Button>
                            <Button color="inherit" component={Link} to="/materials">材质库</Button>
                        </Toolbar>
                    </AppBar>

                    <Drawer anchor="left" open={drawerOpen} onClose={toggleDrawer}>
                        <div style={{ width: 250 }}>
                            <List>
                                {drawerItems.map((item, index) => (
                                    <ListItem button key={item.text} component={Link} to={item.path} onClick={toggleDrawer}>
                                        <ListItemIcon>{item.icon}</ListItemIcon>
                                        <ListItemText primary={item.text} />
                                    </ListItem>
                                ))}
                            </List>
                            <Divider />
                        </div>
                    </Drawer>

                    <Container maxWidth="lg" style={{ marginTop: 20 }}>
                        {strictMode ? (
                            <React.StrictMode>
                                <Routes>
                                    <Route path="/" element={<Home />} />
                                    <Route path="/models" element={<Models />} />
                                    <Route path="/models/create" element={<GeometryModelCreate />} />
                                    <Route path="/models/edit/:id" element={<GeometryModelEdit />} />
                                    <Route path="/materials" element={<MaterialLibrary />} />
                                </Routes>
                            </React.StrictMode>
                        ) : (
                            <Routes>
                                <Route path="/" element={<Home />} />
                                <Route path="/models" element={<Models />} />
                                <Route path="/models/create" element={<GeometryModelCreate />} />
                                <Route path="/models/edit/:id" element={<GeometryModelEdit />} />
                                <Route path="/materials" element={<MaterialLibrary />} />
                            </Routes>
                        )}
                    </Container>
                </div>
            </Router>
        </ModelProvider>
    );
}

export default App; 